<template>
  <div class="app-container">
    <el-form
      v-model:model="queryParams"
      ref="queryFormRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
<% columns.forEach(function(column) { %>
<% if(column.isQuery === '1') { %>
      <el-form-item label="<%= column.columnComment %>" prop="<%= column.javaField %>">
<% if(column.htmlType === 'input') { %>
        <el-input
          v-model="queryParams.<%= column.javaField %>"
          placeholder="请输入<%= column.columnComment %>"
          clearable
          @keyup.enter="handleQuery"
        />
<% } else if(column.htmlType === 'select' || column.htmlType === 'radio') { %>
        <el-select v-model="queryParams.<%= column.javaField %>" placeholder="请选择<%= column.columnComment %>" clearable>
          <el-option
            v-for="dict in <%= column.dictType %>"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
<% } else if(column.htmlType === 'datetime' && column.queryType !== 'BETWEEN') { %>
        <el-date-picker
          v-model="queryParams.<%= column.javaField %>"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择<%= column.columnComment %>"
          style="width: 200px"
        />
<% } else if(column.htmlType === 'datetime' && column.queryType === 'BETWEEN') { %>
        <el-date-picker
          v-model="daterange<%= column.javaField.charAt(0).toUpperCase() + column.javaField.slice(1) %>"
          type="daterange"
          value-format="YYYY-MM-DD"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
        />
<% } %>
      </el-form-item>
<% } %>
<% }); %>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['<%= permissionPrefix %>:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['<%= permissionPrefix %>:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['<%= permissionPrefix %>:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['<%= permissionPrefix %>:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:show-search="showSearch" @query-table="getList" />
    </el-row>

    <el-table v-loading="loading" :data="<%= businessName %>List" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
<% columns.forEach(function(column) { %>
<% if(column.isList === '1') { %>
<% if(column.htmlType === 'datetime') { %>
      <el-table-column label="<%= column.columnComment %>" align="center" prop="<%= column.javaField %>" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.<%= column.javaField %>) }}</span>
        </template>
      </el-table-column>
<% } else if(column.htmlType === 'imageUpload') { %>
      <el-table-column label="<%= column.columnComment %>" align="center" prop="<%= column.javaField %>" width="100">
        <template #default="scope">
          <image-preview :src="scope.row.<%= column.javaField %>" :width="50" :height="50"/>
        </template>
      </el-table-column>
<% } else if(column.dictType && column.dictType !== '') { %>
      <el-table-column label="<%= column.columnComment %>" align="center" prop="<%= column.javaField %>">
        <template #default="scope">
<% if(column.htmlType === 'checkbox') { %>
          <dict-tag :options="<%= column.dictType %>" :value="scope.row.<%= column.javaField %> ? scope.row.<%= column.javaField %>.split(',') : []"/>
<% } else { %>
          <dict-tag :options="<%= column.dictType %>" :value="scope.row.<%= column.javaField %>"/>
<% } %>
        </template>
      </el-table-column>
<% } else { %>
      <el-table-column label="<%= column.columnComment %>" align="center" prop="<%= column.javaField %>"<% if(column.htmlType === 'datetime') { %> width="180"<% } %> />
<% } %>
<% } %>
<% }); %>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button
            type="primary"
            link
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['<%= permissionPrefix %>:edit']"
          >修改</el-button>
          <el-button
            type="primary"
            link
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['<%= permissionPrefix %>:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-if="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />

    <!-- 添加或修改<%= functionName %>对话框 -->
    <el-dialog v-model="open" :title="title" width="500px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<% columns.forEach(function(column) { %>
<% if(column.isInsert === '1' || column.isEdit === '1') { %>
        <el-form-item label="<%= column.columnComment %>" prop="<%= column.javaField %>">
<% if(column.htmlType === 'input') { %>
          <el-input v-model="form.<%= column.javaField %>" placeholder="请输入<%= column.columnComment %>" />
<% } else if(column.htmlType === 'textarea') { %>
          <el-input v-model="form.<%= column.javaField %>" type="textarea" placeholder="请输入内容" />
<% } else if(column.htmlType === 'select' || column.htmlType === 'radio') { %>
          <el-select v-model="form.<%= column.javaField %>" placeholder="请选择<%= column.columnComment %>">
            <el-option
              v-for="dict in <%= column.dictType %>"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
<% } else if(column.htmlType === 'datetime') { %>
          <el-date-picker
            v-model="form.<%= column.javaField %>"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择<%= column.columnComment %>"
            style="width: 200px"
          />
<% } else if(column.htmlType === 'editor') { %>
          <editor v-model="form.<%= column.javaField %>" :min-height="192" />
<% } else if(column.htmlType === 'imageUpload') { %>
          <image-upload v-model="form.<%= column.javaField %>" />
<% } else if(column.htmlType === 'fileUpload') { %>
          <file-upload v-model="form.<%= column.javaField %>" />
<% } else if(column.htmlType === 'checkbox') { %>
          <el-checkbox-group v-model="form.<%= column.javaField %>">
            <el-checkbox
              v-for="dict in <%= column.dictType %>"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-checkbox>
          </el-checkbox-group>
<% } %>
        </el-form-item>
<% } %>
<% }); %>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, computed } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { list<%= BusinessName %>, get<%= BusinessName %>, del<%= BusinessName %>, add<%= BusinessName %>, update<%= BusinessName %> } from "@/api/<%= moduleName %>/<%= businessName %>";
import { parseTime, download } from '@/utils/ruoyi';

/**
 * <%= functionName %>对象类型
 */
interface <%= BusinessName %>Type {
  <%= pkColumn.javaField %>: string | number;
<% columns.forEach(function(column) { %>
  <%= column.javaField %>?: <%= column.javaType === 'String' ? 'string' : column.javaType === 'Long' || column.javaType === 'Integer' ? 'number' : column.javaType === 'Date' ? 'string' : column.javaType === 'Boolean' ? 'boolean' : 'any' %>;
<% }); %>
  [key: string]: any;
}

/**
 * 查询参数类型
 */
interface QueryParams {
  pageNum: number;
  pageSize: number;
  params?: Record<string, any>;
<% columns.forEach(function(column) { %>
<% if(column.isQuery === '1') { %>
  <%= column.javaField %>?: <%= column.javaType === 'String' ? 'string' : column.javaType === 'Long' || column.javaType === 'Integer' ? 'number' : column.javaType === 'Date' ? 'string' : column.javaType === 'Boolean' ? 'boolean' : 'any' %> | null;
<% } %>
<% }); %>
}

      // 遮罩层
const loading = ref(true);
      // 选中数组
const ids = ref<Array<string | number>>([]);
      // 非单个禁用
const single = ref(true);
      // 非多个禁用
const multiple = ref(true);
      // 显示搜索条件
const showSearch = ref(true);
      // 总条数
const total = ref(0);
      // <%= functionName %>表格数据
const <%= businessName %>List = ref<Array<<%= BusinessName %>Type>>([]);
      // 弹出层标题
const title = ref('');
      // 是否显示弹出层
const open = ref(false);
<% columns.forEach(function(column) { %>
<% if(column.htmlType === 'datetime' && column.queryType === 'BETWEEN') { %>
// <%= column.columnComment %>日期范围
const daterange<%= column.javaField.charAt(0).toUpperCase() + column.javaField.slice(1) %> = ref<string[]>([]);
<% } %>
<% }); %>
      // 查询参数
const queryParams = reactive<QueryParams>({
        pageNum: 1,
        pageSize: 10,
<% columns.forEach(function(column) { %>
<% if(column.isQuery === '1') { %>
        <%= column.javaField %>: null,
<% } %>
<% }); %>
});

      // 表单参数
const form = reactive<<%= BusinessName %>Type>({
  <%= pkColumn.javaField %>: 0,
<% columns.forEach(function(column) { %>
<% if(column.isInsert === '1' || column.isEdit === '1') { %>
<% if(column.htmlType === 'checkbox') { %>
  <%= column.javaField %>: [],
<% } else { %>
  <%= column.javaField %>: <%= column.javaType === 'String' ? "''" : column.javaType === 'Long' || column.javaType === 'Integer' ? '0' : column.javaType === 'Boolean' ? 'false' : 'null' %>,
<% } %>
<% } %>
<% }); %>
});

      // 表单校验
const rules = reactive<FormRules>({
<% columns.forEach(function(column) { %>
<% if(column.isRequired === '1') { %>
        <%= column.javaField %>: [
          { required: true, message: "<%= column.columnComment %>不能为空", trigger: <% if(column.htmlType === 'select') { %>"change"<% } else { %>"blur"<% } %> }
        ],
<% } %>
<% }); %>
});

const queryFormRef = ref<FormInstance>();
const formRef = ref<FormInstance>();

    /** 查询<%= functionName %>列表 */
function getList() {
  loading.value = true;
<% columns.forEach(function(column) { %>
<% if(column.htmlType === 'datetime' && column.queryType === 'BETWEEN') { %>
  queryParams.params = {};
  if (daterange<%= column.javaField.charAt(0).toUpperCase() + column.javaField.slice(1) %>.value && daterange<%= column.javaField.charAt(0).toUpperCase() + column.javaField.slice(1) %>.value.length > 0) {
    queryParams.params.begin<%= column.javaField.charAt(0).toUpperCase() + column.javaField.slice(1) %> = daterange<%= column.javaField.charAt(0).toUpperCase() + column.javaField.slice(1) %>.value[0];
    queryParams.params.end<%= column.javaField.charAt(0).toUpperCase() + column.javaField.slice(1) %> = daterange<%= column.javaField.charAt(0).toUpperCase() + column.javaField.slice(1) %>.value[1];
  }
<% } %>
<% }); %>
  list<%= BusinessName %>(queryParams).then(response => {
    <%= businessName %>List.value = response.rows;
    total.value = response.total;
    loading.value = false;
      });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  formRef.value?.resetFields();
  form.<%= pkColumn.javaField %> = 0;
<% columns.forEach(function(column) { %>
<% if(column.isInsert === '1' || column.isEdit === '1') { %>
<% if(column.htmlType === 'checkbox') { %>
  form.<%= column.javaField %> = [];
<% } else { %>
  form.<%= column.javaField %> = <%= column.javaType === 'String' ? "''" : column.javaType === 'Long' || column.javaType === 'Integer' ? '0' : column.javaType === 'Boolean' ? 'false' : 'null' %>;
<% } %>
<% } %>
<% }); %>
}

    /** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}

    /** 重置按钮操作 */
function resetQuery() {
  queryFormRef.value?.resetFields();
<% columns.forEach(function(column) { %>
<% if(column.htmlType === 'datetime' && column.queryType === 'BETWEEN') { %>
  daterange<%= column.javaField.charAt(0).toUpperCase() + column.javaField.slice(1) %>.value = [];
<% } %>
<% }); %>
  handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection: <%= BusinessName %>Type[]) {
  ids.value = selection.map(item => item.<%= pkColumn.javaField %>);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}

    /** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加<%= functionName %>";
}

    /** 修改按钮操作 */
function handleUpdate(row?: <%= BusinessName %>Type) {
  reset();
  const <%= pkColumn.javaField %> = row ? row.<%= pkColumn.javaField %> : ids.value[0];
      get<%= BusinessName %>(<%= pkColumn.javaField %>).then(response => {
    Object.assign(form, response.data);
<% columns.forEach(function(column) { %>
<% if(column.htmlType === 'checkbox') { %>
    form.<%= column.javaField %> = form.<%= column.javaField %>?.split(',');
<% } %>
<% }); %>
    open.value = true;
    title.value = "修改<%= functionName %>";
      });
}

    /** 提交按钮 */
function submitForm() {
  formRef.value?.validate(valid => {
        if (valid) {
<% columns.forEach(function(column) { %>
<% if(column.htmlType === 'checkbox') { %>
      // 转换复选框数组为字符串类型
      form.<%= column.javaField %> = form.<%= column.javaField %>?.join(',');
<% } %>
<% }); %>
      if (form.<%= pkColumn.javaField %>) {
        update<%= BusinessName %>(form).then(() => {
          ElMessage.success("修改成功");
          open.value = false;
          getList();
            });
          } else {
        add<%= BusinessName %>(form).then(() => {
          ElMessage.success("新增成功");
          open.value = false;
          getList();
            });
          }
        }
      });
}

    /** 删除按钮操作 */
function handleDelete(row?: <%= BusinessName %>Type) {
  const <%= pkColumn.javaField %>s = row ? [row.<%= pkColumn.javaField %>] : ids.value;
  ElMessageBox.confirm(`是否确认删除<%= functionName %>编号为"${<%= pkColumn.javaField %>s}"的数据项?`).then(() => {
        return del<%= BusinessName %>(<%= pkColumn.javaField %>s);
      }).then(() => {
    getList();
    ElMessage.success("删除成功");
      }).catch(() => {});
    }

/** 导出按钮操作 */
function handleExport() {
  download('<%= moduleName %>/<%= businessName %>/export', {
    ...queryParams
  }, `<%= businessName %>_${new Date().getTime()}.xlsx`);
}

onMounted(() => {
  getList();
});
</script> 